<template>
    <div class="detile">
      <van-nav-bar
    title="商品详情"
    left-text="返回"
    left-arrow
    @click-left="$router.go(-1)"
      />
      <div class="shop-header" :style="{backgroundImage:'url(' + (shopinfo.info && shopinfo.info.poi_back_pic_url) +')' }">
        <div class="left">
          <img :src="shopinfo.info && shopinfo.info.picUrl" alt="">
          <span>{{ shopinfo.info && shopinfo.info.name}}</span>
        </div>
        <!-- 取消收藏按钮 -->
        <!-- <div class="right" v-if="isCollect" @click="$store.commit('cancel_collect',shopinfo.info)" style="color:red">❤</div> -->
        <div class="right" v-if="isCollect" @click="request_shop_unfav(shopinfo.info)" style="color:red">❤</div>
        <!-- 收藏按钮 -->
        <!-- <div class="right" v-else @click="$store.commit('collect',shopinfo.info)">❤</div> -->
        <div class="right" v-else @click="request_shop_fav(shopinfo.info)">❤</div>
      </div>
  
      <!-- 店铺内的 商品分类和列表 -->
      <div class="box">
        <div class="left">
          <van-sidebar v-model="currentIndex">
            <van-sidebar-item  v-for="(item,index) in shopinfo.taglist" :key="index" :title="item.name" />
          </van-sidebar>
        </div>
        <div class="right">
          <div class="good" v-for="(item,index) in shopinfo.taglist && shopinfo.taglist[currentIndex].goodlist" :key="index">
            <div class="imgbox">
              <img :src="item.picture" alt="">
            </div>
            <div class="text">
              <div class="up">
                <div class="name">{{item.name}}</div>
                <div class="desc">{{item.month_saled_content}}</div>
              </div>
              <div class="down">
                <div class="price">¥{{item.min_price}}</div>
                <div class="opes">
                  <span v-show="incar(item)"  @click="request_subshopcar(item)">-</span>
                  <p v-show="incar(item)">{{iscount(item)}}</p>
                  <span @click="request_addshopcar(item)">+</span>
                </div>
              </div>
            </div>
          </div>
        </div> 
       </div>
       <Shopcar ref="shopcarlist"/>
       <div class="subbar">
        <span>
          <van-icon name="cart" :badge="$store.state.shopcarlist.length" @click="$refs.shopcarlist.changevisible()"/>总数：{{allnum}} 总价：{{allprice}}
        </span>
        <span>去结算</span>
       </div>
  </div>
  </template>
  
  <script>
  import {mapState,mapMutations,mapActions} from 'vuex'
  import {Dialog} from 'vant'
  import {shop_shopinfo} from '../utils/service'
  import Shopcar from '../components/Shopcar.vue'
  export default {
  data(){
      return {
          currentIndex:0,
          shopinfo:{}
      }
  },
  components:{
    Shopcar
  },
  computed:{
  ...mapState(['collectlist','shopcarlist']),//映射vuex的数据
  // ...mapGetters(['allnum']),
  allnum() {
      var num = 0;
      this.shopcarlist.forEach((item) => {
        num += item.count
      });
      return num
    },
    allprice(){
      var num = 0;
      this.shopcarlist.forEach((item) => {
        num += item.count*item.min_price
      });
      return num.toFixed(2)
    },
  isCollect(){
      var index=this.collectlist.findIndex((item)=>{
          return item.mtWmPoiId==this.shopinfo.mtWmPoiId;
      })
      return index !==-1
      }
  },
  methods:{
      ...mapMutations(['cancel_collect']),
      ...mapActions(['request_shop_fav','request_shop_unfav','request_addshopcar','request_subshopcar']),
      incar(item){//判断商品是否在购物车中
        //item为需要判断的商品
        var good=this.shopcarlist.findIndex((biao)=>{
          return biao.id==item.id
        })
        return good!=-1
      },
      // 获取商品在购物车中的数量
      iscount(item){
        var good=this.shopcarlist.find((biao)=>{
          return biao.id==item.id
        })
        if(good){
          return good.count
        }
      }
  },
  mounted(){
      shop_shopinfo({id:this.$route.params.id}).then((res)=>{
          console.log(res.data);
          if(res.data.shopinfo){
              this.shopinfo=res.data.shopinfo
          }else{
              Dialog.alert({
              title:'提示',
              message:'该店铺已倒闭！！'
               }).then(()=>{
                  this.$router.go(-1)
                  })
          }
      })
  }
  }
  </script>
  
  <style lang='scss' scoped>
  .shop-header{
    display: flex;
    justify-content: space-between;
    padding: 50px 10px;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    .left{
      flex:1;
      display: flex;
      align-items: center;
      img{
        width: 30px;
        margin-right: 10px;
        border-radius: 50%;
      }
    }
    .right{
      width: 20px;
      text-align: right;
    }
  }
  .box{
    display: flex;
    padding-bottom: 56px;
    .left{
      width: 80px;
    }
    .right{
      flex:1;
      .good{
        display: flex;
        margin: 10px;
        .imgbox{
          width: 80px;
          height: 80px;
          margin-right: 10px;
          img{
            width:80px;
            height: 80px;
          }
        }
        .text{
          flex:1;
          font-size: 12px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .name{
            font-size: 15px;
            font-weight: bold;
          }
          .desc {
            margin-top: 6px;
          }
          .down{
            display: flex;
            justify-content: space-between;
            margin-top: 6px;
            .price{
              font-size: 15px;
              color: red;
              font-weight: bold;
            }
            .opes{
              width: 60px;
              display: flex;
              line-height: 18px;
              justify-content: space-around;
              span {
                display: inline-block;
                width: 18px;
              height: 18px;
              font-size: 18px;
              background: rgb(40, 126, 231);
              color: #fff;
              border-radius: 100%;
              text-align: center;
              line-height: 18px;
              }
              
            }
          }
        }
      }
    }
  }
  .subbar {
    background-color: #666;
    position: fixed;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
  }
  .subbar span:nth-child(1){
    i {
      font-size: 28px;
      color: rgb(43, 135, 228);
      margin-right: 10px;
    }
  }
  .subbar span:nth-child(2){
    background-color: rgb(79, 229, 79);
    color: #fff;
    display: inline-block;
    width: 100px;
    padding: 8px 0;
    font-size: 14px;
    text-align: center;
    box-sizing: border-box;
    border-radius: 4px;
  }
  </style>